<script setup lang="ts">
import { articles } from '../api/index'
import { ref, watch } from 'vue'
import type { resultsArr } from '../types/index'
import { useCurrentStore } from '../store/current'
const store = useCurrentStore()
// const props = defineProps<{
//   currentId: number
// }>()

// const stop=watch(
// 需要侦听的数据 / [需要侦听的数据] / ()=>某个数据.属性
// (newVal,oldVal)=>{newVal:修改后的值,oldVal:修改前的值},
// {
//    deep:深度侦听
//    immediate:是否立即执行回调
//    flush:
//       pre:渲染前执行回调
//       post:渲染后执行回调
//       sync:修改一次执行一次回调（渲染前）
// })
watch(
  () => store.currentId,
  () => {
    getData()
  }
)
const list = ref<resultsArr>([])
const getData = async () => {
  const res = await articles(store.currentId)
  list.value = res.data.results
  console.log(res.data.results)
}
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="i in list" :key="i.art_id">
      <p class="title">
        {{ i.title }}
      </p>
      <img
        v-for="(item, index) in i.cover.images"
        :key="index"
        class="img"
        :src="item"
        alt=""
      />
      <div class="info">
        <span>{{ i.aut_name }}</span>
        <span>{{ i.comm_count }}评论</span>
        <span>{{ i.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
